<template>
  <div class="l-banner">
    <dl>
      <dt>全部分类</dt>
      <dd>
        <i class="iconfont icon-fenzu"></i>
        <router-link to="/">美食</router-link>
        <i class="iconfont icon-youjiantou-copy"></i>
      </dd>
      <dd>
        <i class="iconfont icon-meituan"></i>
        <router-link to="/">外卖</router-link>
        <i class="iconfont icon-youjiantou-copy"></i>
      </dd>
      <dd>
        <i class="iconfont icon-jiudian1"></i>
        <router-link to="/">酒店</router-link>
        <i class="iconfont icon-youjiantou-copy"></i>
      </dd>
      <dd>
        <i class="iconfont icon-kezhangongyu"></i>
        <router-link to="/">民宿</router-link>
        <i class="iconfont icon-youjiantou-copy"></i>
      </dd>
      <dd>
        <i class="iconfont icon-dianying"></i>
        <router-link to="/">猫眼电影</router-link>
        <i class="iconfont icon-youjiantou-copy"></i>
      </dd>
      <dd>
        <i class="iconfont icon-huoche"></i>
        <router-link to="/">火车票</router-link>/
        <router-link to="/">机票</router-link>
        <i class="iconfont icon-youjiantou-copy"></i>
      </dd>
      <dd>
        <i class="iconfont icon-ktv"></i>
        <router-link to="/">休闲娱乐</router-link>/
        <router-link to="/">ktv</router-link>
        <i class="iconfont icon-youjiantou-copy"></i>
      </dd>
      <dd>
        <i class="iconfont icon-meituan"></i>
        <router-link to="/">生活服务</router-link>
        <i class="iconfont icon-youjiantou-copy"></i>
      </dd>
      <dd>
        <i class="iconfont icon-meituan"></i>
        <router-link to="/">丽人</router-link>/
        <router-link to="/">美发</router-link>/
        <router-link to="/">医学美容</router-link>
        <i class="iconfont icon-youjiantou-copy"></i>
      </dd>
      <dd>
        <i class="iconfont icon-meituan"></i>
        <router-link to="/">结婚</router-link>/
        <router-link to="/">婚纱摄影</router-link>/
        <router-link to="/">婚宴</router-link>
        <i class="iconfont icon-youjiantou-copy"></i>
      </dd>
      <dd>
        <i class="iconfont icon-meituan"></i>
        <router-link to="/">亲子</router-link>/
        <router-link to="/">儿童乐园</router-link>/
        <router-link to="/">助教</router-link>
        <i class="iconfont icon-youjiantou-copy"></i>
      </dd>
      <dd>
        <i class="iconfont icon-meituan"></i>
        <router-link to="/">家装</router-link>/<router-link to="/"
          >建材</router-link
        >/<router-link to="/">家居</router-link>
        <i class="iconfont icon-youjiantou-copy"></i>
      </dd>
      <dd>
        <i class="iconfont icon-meituan"></i>
        <router-link to="/">学习培训</router-link>/
        <router-link to="/">音乐培训</router-link>
        <i class="iconfont icon-youjiantou-copy"></i>
      </dd>
      <dd>
        <i class="iconfont icon-meituan"></i>
        <router-link to="/">医疗健康</router-link>/
        <router-link to="/">宠物</router-link>/
        <router-link to="/">爱车</router-link>
        <i class="iconfont icon-youjiantou-copy"></i>
      </dd>
      <dd>
        <i class="iconfont icon-meituan"></i>
        <router-link to="/">酒吧</router-link>/<router-link to="/"
          >密室逃脱</router-link
        >
        <i class="iconfont icon-youjiantou-copy"></i>
      </dd>
      <dd>
        <i class="iconfont icon-meituan"></i>
        <router-link to="/">酒吧</router-link>/<router-link to="/"
          >密室逃脱</router-link
        >
        <i class="iconfont icon-youjiantou-copy"></i>
      </dd>
    </dl>
  </div>
</template>

<script>
export default {};
</script>
<style lang="less" scoped>
.l-banner {
  float: left;
  width: 230px;
  height: 475px;
  position: relative;
  text-align: left;
  box-sizing: border-box;
  margin-top: -50px;
  color: #646464;
  background: #fff;
  box-sizing: border-box;
  border: 1px solid #e5e5e5;
  dl {
    padding-bottom: 8px;
    box-sizing: border-box;
    display: block;
    dt {
      height: 50px;
      padding-top: 15px;
      padding-bottom: 10px;
      box-sizing: border-box;
      font-size: 16px;
      color: #222222;
      font-weight: bold;
      margin-left: 15px;
    }
    dd {
      position: relative;
      box-sizing: border-box;
      padding: 2px 12px;
      height: 26px;
      line-height: 26px;
      i:nth-of-type(1) {
        margin-right: 5px;
      }
      a {
        font-size: 13px;
        height: 20px;
        line-height: 20px;
        color: #646464;
        cursor: pointer;
        margin: 0 3px;
      }
      i:last-child {
        float: right;
        font-size: 10px;
        color: #bfbfbf;
      }
      &:hover {
        background: sandybrown;
      }
    }
  }
}
</style>